<template>

    <div>
        <el-card class="box-card">
        <el-breadcrumb separator=">">
            <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>系统管理</el-breadcrumb-item>
            <el-breadcrumb-item>权限管理</el-breadcrumb-item>
        </el-breadcrumb>
        <el-divider></el-divider>
            <el-button type="primary" icon="el-icon-edit"  @click="updatemenu()"> 添加</el-button>
        <el-table
                :data="tableData"
                style="width: 100%;margin-bottom: 20px;"
                row-key="menuId"
                border
                :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
            <el-table-column
                    prop="menuId"
                    label="菜单Id"
                    sortable
                    width="100">
            </el-table-column>
            <el-table-column
                    prop="menuName"
                    label="菜单名称"
                    sortable
                    width="100"
           >
<!--                <template slot-scope="scope"> -->
<!--                <i :class="'iconFont'+' '+'clms'+scope.row.icon"></i>-->
<!--                </template>-->

            </el-table-column>
            <el-table-column
                    width="120"
                    prop="url"
                    label="url">
            </el-table-column>
            <el-table-column
                    label="创建人"
                    prop="createBy"
                    width="100">
            </el-table-column>

            <el-table-column
                    width="100"
                    prop="updateTime"
                    label="更新时间">
            </el-table-column>
            <el-table-column
                    prop="createTime"
                    label="创建时间">
            </el-table-column>
            <el-table-column
                    prop="remark"
                    label="说明">
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-popconfirm
                            confirm-button-text='好的'
                            cancel-button-text='取消'
                            icon="el-icon-info"
                            icon-color="red"
                            title="您确定要删除该菜单"
                            @confirm=remove(scope.row.menuId) >

                        <el-button type="danger" circle size="mini" icon="el-icon-delete" circle slot="reference"  >删除</el-button></el-popconfirm>

                    <el-button type="warning" icon="el-icon-s-tools" size="mini" circle  @click="updatemenu(scope.row.menuId)">修改</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-dialog  title="用户信息"
                    :visible.sync="status"
                    width="60%"
                    :before-close="handleClose">
<MenuAddOrupdata v-model:status="status" :menuId="menuId" :key="timer"></MenuAddOrupdata>
        </el-dialog>
        </el-card>
    </div>
</template>

<script>
    import MenuAddOrupdata from "../../components/system/MenuAddOrUpdata";
import Bydiary from "../../components/statistics/Bydiary";
    export default {
        components: {MenuAddOrupdata},
        name: "Menu",
        data() {
            return {
                timer:'',
                status:false,
                menuId: 0,
                tableData:[]
            }
        },
        created() {
            this.initmenutable()
        },
        methods:{
            handleClose(done) {
                this.$confirm('确认关闭？')
                    .then(_ => {
                        done();
                    })
                    .catch(_ => {
                    });
            },
            //重新渲染组件
            upcomen() {
                this.timer = new Date().getTime()//创新刷新组件问题
            },
            initmenutable() {
                var that = this;
                this.$http.get("/system/menu/getallmenu").then(function (response) {
                 that.tableData=response.data.result.menus
                })
            },
            updatemenu(menuid) {
                this.status = true;
                this.menuId = menuid;
                this.upcomen()
            },
            remove(menuid) {
                var that=this
                this.$http.delete(`/system/menu/remove/${menuid}`).then(function (response) {
                    that.$message.success(response.data.message)
                    that.initmenutable()
                })
            }
        }
    }
</script>

<style scoped>

</style>